<template>
  <music-box class="music-box"
             titleStyle="color: #ffffff;"
             :title="detailData.name">
    <image class="bg-img"
           :src="detailData.picUrl"
           slot="bg">
    </image>
    <!-- 播放器区域 -->
    <audio-play v-model="play"
                :detailData="detailData"
                :playData="playData"
                :lyric="lyricData">
    </audio-play>

    <!-- 更多喜欢 -->
    <more-like :data="simiData"></more-like>

    <!-- 评论 -->
    <talk :data="talkData"></talk>
  </music-box>
</template>

<script>
  import moreLike from '@/pages/pageDetail/components/more-like.vue'
  import talk from '@/pages/pageDetail/components/talk.vue'

  import { mapMutations } from 'vuex'

  export default {
    components: {
      moreLike,
      talk
    },
    data() {
      return {
        // 歌曲id
        id: '',
        // 歌曲详情
        detailData: {},
        // 更多喜欢（相似歌曲）
        simiData: [],
        // 评论列表
        talkData: [],
        // 歌词数据
        lyricData: [],
        // 音乐播放数据（url等）
        playData: {},
        // 是否播放
        play: true
      }
    },
    onLoad(query) {
      this.id = query.id || ''
    },
    async mounted() {
      this.getDetailData()
      this.getLyricData()
      this.getPlayData()
      this.getSimiData()
      this.getTalkData()

      this.setMusicId(this.id)
    },
    methods: {
      ...mapMutations('play-video', ['setMusicId']),

      // 获取歌曲详情数据
      async getDetailData() {
        let res = await this.api.getMusicInfo(this.id)
        if (res.code !== 200)
          return uni.$showError('获取歌曲详情失败')

        this.detailData = res.songs &&
          res.songs.length && res.songs[0].al || {}
      },

      // 获取更多喜欢（相似歌曲）
      async getSimiData() {
        let res = await this.api.getSimiSong(this.id)
        if (res.code !== 200)
          return uni.$showError('获取相似歌曲失败')

        // 数据预处理
        this.simiData = (res.songs || []).map(
          item => {
            let musicInfo = item.album || {}
            let singerInfo = musicInfo.artists &&
              musicInfo.artists.length &&
              musicInfo.artists[0] || {}
            let privilege = item.privilege || {}
            let flag = privilege.flag
            return {
              // 歌曲id
              id: item.id,
              // 歌名
              musicName: musicInfo.name,
              // 歌曲海报
              pictrue: musicInfo.picUrl,
              // 歌手
              singer: singerInfo.name,
              // 是否独家
              dujia: privilege.flag >= 60 && privilege.flag <= 70,
              // 是否高清
              sq: privilege.maxbr === 999000
            }
          })
      },

      // 获取歌曲评论列表
      async getTalkData() {
        let res = await this.api.getMusicComment(this.id)
        if (res.code !== 200)
          return uni.$showError('获取歌曲评论失败')
        this.talkData = (res.hotComments || []).map(item => {
          let user = item.user || {}
          return {
            id: item.commentId,
            // 昵称
            nickName: user.nickname,
            // 头像
            userImg: user.avatarUrl,
            // 评论内容
            talk: item.content,
            // 评论时间
            time: this.time.formatDate(new Date(item.time)),
            // 点赞数
            favor: item.likedCount
          }
        })
      },

      // 获取歌词数据
      async getLyricData() {
        let res = await this.api.getLyric(this.id)
        if (res.code !== 200)
          return uni.$showError('获取歌词失败')
        // 格式化歌词
        let lrcStr = res.lrc && res.lrc.lyric || ''
        let lyric = lrcStr.split('\n').map(item => {
          let res = null
          let re = /\[(.*?)\] ?(.*)$/
          item.replace(re, (total, time, lyric) => {
            if (!time) return null
            let [s, m, h] = time.split(':').reverse()
            res = {
              // 写点花里胡哨的东西 将时间转为秒数
              time: +s + ~~m * 60 + ~~h * 3600,
              lyric: lyric || ''
            }
          })
          return res
        }).filter(i => i)
        this.lyricData = lyric
      },

      // 获取音乐播放地址
      async getPlayData() {
        let res = await this.api.getMusicUrl(this.id)
        if (res.code !== 200)
          return uni.$showError('获取音乐失败')
        this.playData = res.data && res.data.length && res.data[0] || {}
      }
    }
  }
</script>

<style lang="scss"
       scoped>
  .music-box {
    .bg-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: scaleX(1.2);
      filter: blur(80px);

      &:after {
        content: ' ';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(100, 100, 100, .5);
      }
    }
  }
</style>
